<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <link rel="stylesheet" href="../dist/css/main.css">
  <style type="text/css">
    .echart {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
<div>
  <div class="layui-btn-group">
    <button class="layui-btn " data-type="today">今天</button>
    <button class="layui-btn" data-type="yestoday">昨天</button>
    <button class="layui-btn" data-type="week">一周内</button>
    <button class="layui-btn" data-type="month">一月内</button>
  </div>
  <div class="echart" id="echart"></div>
</div>
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/echarts.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script>
  $(function () {
    var yestodayData = [0, 40, 10, 23, 32, 9, 10];
    var weekData = [11, 11, 15, 13, 12, 13, 10];
    var monthData = [1, 11, 5, 13, 2, 13, 0];

    var todayData = {
      loginData: [0, 0, 0, 1, 1, 0, 0, 2, 0, 0, 0, 1],
      studyData: [0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 0, 1],
      time: ['0:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '24:00']
    }

    var option = {
      // color: ['#ffff00', '#ddff00'],
      title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:['最高气温','最低气温']
      },
      xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        }
      },
      series: [{
        name:'最高气温',
        type:'line',
        smooth: true,
        areaStyle: {},
        data:[11, 11, 15, 13, 12, 13, 10]
      },
        {
          name:'111',
          type:'line',
          smooth: true,
          areaStyle: {},
          data:[11, 11, 15, 13, 12, 13, 10]
        }]
    };
    var charts = echarts.init(document.getElementById('echart'))
    charts.setOption(option);
    $('.layui-btn').on('click', function (e) {
      var $this = $(this);
      var dataType = $this.data('type');
      if (dataType === 'today') {
        option.series[0].data = todayData.loginData;
        option.series[1].data = todayData.studyData;
        option.xAxis.data = todayData.time;
      } else if (dataType === 'yestoday') {
        option.series.data = yestodayData
      } else if (dataType === 'week') {
        option.series.data = weekData
      } else if (dataType === 'month') {
        option.series.data = monthData
      }
      charts.clear();
      charts.setOption(option);

    })
  });
</script>
</body>
</html>
